<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="css/myCraft.css">
</head>

<body>
    <div class="profile-container">
        <!-- 用户信息头部 -->
        <header class="profile-header">
            <div class="avatar-container">
                <img src="https://via.placeholder.com/150" alt="用户头像" class="avatar">
                <span class="online-status"></span>
            </div>
            <div class="profile-info">
                <h1 class="username">张三</h1>
                <p class="bio">前端开发者 | 摄影爱好者 | 旅行达人</p>
                <div class="stats">
                    <div class="stat-item">
                        <span class="stat-number" id="noteCount">28</span>
                        <span class="stat-label">笔记</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="followerCount">356</span>
                        <span class="stat-label">粉丝</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="followingCount">124</span>
                        <span class="stat-label">关注</span>
                    </div>
                </div>
            </div>
            <div class="action-buttons">
                <button id="followBtn" class="btn follow-btn">关注</button>
                <button class="btn message-btn">私信</button>
            </div>
        </header>

        <!-- 关注状态提示 -->
        <div id="followStatus" class="follow-status"></div>

        <!-- 笔记列表 -->
        <section class="notes-section">
            <h2>他的笔记</h2>
            <div id="notesList" class="notes-grid">
                <!-- 笔记将通过JS动态生成 -->
            </div>
        </section>
    </div>

    <script src="js/data.js"></script>
    <script src="js/myCraft.js"></script>
    <script src="js/utils.js"></script>
</body>

</html>